<template>
  <view class="follow-lists">
    <view class="scrollbar-view" ref="scrollbarRef">
      <view class="scrollbar-flex-content">
        <p
          v-for="(followItem, index) in followLists"
          :key="index"
          class="scrollbar-demo-item"
          :ref="'followItem-' + index"
          @click="clickFollow(followItem.id, index)"
        >
          <image
            class="user-avatar"
            :class="{ 'user-focus': followItem.isUserFocused }"
            :src="this.baseURL + followItem.avatar"
            mode="aspectFill"
          ></image>
          <text class="user-name">{{ followItem.username }}</text>
        </p>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "FollowList",
    props: {
      followLists: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        isShow: false,
        currentIndex: -1,
        preIndex: -1,
      };
    },
    mounted() {},
    methods: {
      clickFollow(id, index) {
        this.$emit("load-follow-video-data", id);
        this.currentIndex = index;
        this.$nextTick(() => {
          // console.log("followLists", this.followLists);
          try {
            // pre index 更改为false
            if (this.preIndex !== -1) {
              const preFollower = {
                ...this.followLists[this.preIndex],
                isUserFocused: false,
              };
              this.followLists.splice(this.preIndex, 1, preFollower);
            }
            const updatedFollower = {
              ...this.followLists[this.currentIndex],
              isUserFocused: true,
            };
            this.followLists.splice(this.currentIndex, 1, updatedFollower);
          } catch (error) {
            console.error("Error updating follower:", error);
          }
          this.preIndex = this.currentIndex;
        });
      },
      handleWheel(e) {
        if (e.preventDefault) {
          e.preventDefault();
        } else {
          e.returnValue = false;
        }
        const scrollContainer = this.$refs.scrollbarRef.$el;
        if (scrollContainer) {
          scrollContainer.scrollLeft += e.deltaY;
        }
      },
    },
    mounted() {
      // #ifdef H5
      this.$nextTick(() => {
        const scrollContainer = this.$refs.scrollbarRef.$el;
        if (scrollContainer) {
          scrollContainer.addEventListener("wheel", this.handleWheel, {
            passive: false,
          });
        }
      });
      // #endif
    },
    beforeUnmount() {
      // #ifdef H5
      const scrollContainer = this.$refs.scrollbarRef.$el;
      if (scrollContainer) {
        scrollContainer.removeEventListener("wheel", this.handleWheel);
      }
      // #endif
    },
    watch: {
      followLists: {
        handler(newVal) {},
        deep: true,
        immediate: true,
      },
    },
  };
</script>

<style scoped>
  .follow-lists {
    display: flex;
    top: 45px;
    left: 0; /* 左侧固定导航 */
    right: 0; /* 容器占据整个视口的宽度*/
    white-space: nowrap;
    padding: 10px 0 0 0;
    background-color: #171827;
    overflow-x: auto;
    z-index: 10;
    height: 114px;
    /* flex: 0 0 auto; */
    /* color: #e0e0e0;  */
  }
  .scrollbar-view {
    background-color: #171827;
    width: 100%;
  }
  .scrollbar-view::-webkit-scrollbar {
    height: 4px; /* 滚动条高度 */
  }
  .scrollbar-view::-webkit-scrollbar-track {
    background-color: #171827;
    border-radius: 10px;
  }
  .scrollbar-view::-webkit-scrollbar-thumb {
    background-color: #383838;
    border-radius: 10px;
    /* border: 1px solid #000; */
  }

  .scrollbar-wrapper {
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .scrollbar-view {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 100%;
    overflow-x: auto;
  }
  .scrollbar-view::-webkit-scrollbar {
    /* background-color: #000; */
    width: 8px; /* 滚动条宽度 */
    height: 8px; /* 滚动条高度 */
  }
  .user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    margin-bottom: 5px;
    border: 3px solid #777;
  }
  .user-focus {
    border: 3px solid red;
  }

  .scrollbar-flex-content {
    display: flex;
    min-width: max-content; /* 确保内容超出容器时可以滚动 */
  }
  .scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    min-width: 55px;
  }
</style>
